<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="author" content="于浩">
        <title>导航栏</title>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <style>
            body{
                background-color: #456789;
            }
        </style>
    </head>
    <body>
        <!--navbar定义导航栏
        navbar-default : 定义默认样式导航栏.
        navbar-inverse: 定义黑色导航栏.
        navbar-fixed-top: 固定到顶部的导航栏.
        -->
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <!--navbar-header: 定义导航栏的头部信息.-->
            <div class="navbar-header">
                <!--定义一个展开按钮.
                nav-touggle: 定义导航栏切换控制.
                data-toggle: 定义切换操作,collapse: 合并.
                data-target定义切换的目标元素,即展开/合闭的元素.
                -->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#xxx">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <!--navbar-brand定义一个导航栏上的商标.-->
                <a href="#" class="navbar-brand">智游教育</a>                
            </div>
            <!--collapse定义一个合并的效果,
            navabar-collapse定义导航栏合并的效果,
            id是data-target指定的id选择器的值-->
            <div class="collapse navbar-collapse" id="xxx">
                <!--nav定义导航内容,navbar-nav定义导航栏内的导航内容.-->
                <ul class="nav navbar-nav">
                    <!--超链接不仅可以跳转页面,还可以设置锚点(定位点),定位到页面某一块区域.
                    原理: 设置超链接href属性的值为要定位到的元素的id的属性值.
                    常用于长页面快速定位.-->
                    <li><a href="#h5">HTML5</a></li>
                    <li><a href="#css">CSS3</a></li>
                    <li><a href="#js">JS</a></li>
                    <li class="dropdown">
                        <!--dropdown-toggle定义下拉框切换控制按钮.
                        data-toggle这只该元素执行的操作.-->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            Python
                            <b class="caret"></b>
                        </a>
                        <!--dropdown-menu: 定义一个下拉菜单-->
                        <ul class="dropdown-menu">
                            <li><a href="#py">选项1</a></li>
                            <li class="divider"></li>
                            <li><a href="#">选项2</a></li>
                            <li class="divider"></li>
                            <li><a href="#">选型3</a></li>
                            <li class="divider"></li>
                            <li><a href="#">选项4</a></li>
                        </ul>
                    </li>
                </ul>
            </div>


        </nav>
        <h1 style="padding-top:55px;" id="h5">HTML5</h1>
        <div style="height: 1000px;font-size: 50px; text-align: center; background-color: orange; ">
            <p>123456789</p>

        </div>
        <h1 id="css">CSS3</h1>
        <div style="background-color: wheat;">
            <p>1546464641651</p>
        </div>
        </div>
        <h1 id="js">JS</h1>
        <div style="background-color: yellow;">
            <p>1546464641651</p>
        </div>
        </div>
        <h1 id="py">Python</h1>
        <div style="background-color: violet;">
            <p>1546464641651</p>
        </div>








        <script src="bootstrap/js/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>